﻿<template>
    <el-container>
        <el-header>
            <div class="left-panel" >
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="!addState"
                    @click="exportExcel"
                    v-if="orgType==1||orgType==2"
                >导出</el-button>
                <el-button
                    type="primary"
                    icon="el-icon-plus"
                    :disabled="!addState"
                    v-if="orgType==1||orgType==2"
                    @click="opAdd"
                >新增</el-button>
                <el-button
                    type="info"
                    plain
                    icon="el-icon-delete"
                    :disabled="!deleteState"
                    @click="opBatchDelete"
                    v-show="isShow"
                >删除</el-button>
                <sc-export v-if="orgType==1" 
                    :queryType="`material/material-jd-file`"   
                    :queryList="queryList" 
                    :fileName="'金蝶物料信息'"
                    :isTest="true" 
                    showText="金蝶物料导出"/>
                <sc-export v-if="orgType==1" 
                    :queryType="`material/material-stock-jd-file`" 
                    :queryList="queryList" 
                    :fileName="'金蝶物料组织公共信息'"
                    :isTest="true" 
                    showText="金蝶物料组织导出"/>
            </div>
            <div class="right-panel">
                <el-button :icon="Search"   type="primary" @click="opBindData">查询</el-button>
                <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                <el-button text type="primary" @click="showCondition = !showCondition">
                    <span v-if="!showCondition">展开</span>
                    <span v-else>收起</span>
                    <vab-icon
                        class="vab-dropdown"
                        :class="{ 'vab-dropdown-active': fold }"
                        icon="arrow-up-s-line"
                    />
                </el-button>
            </div>
        </el-header>
        <el-foot v-show="showCondition">
            <vab-query-form-top-panel>
                <el-form inline label-width="49px" :model="queryForm" style="margin-top: 5px;margin-right: 20px;">
                    <el-row type="flex" style="flex-wrap:wrap" :gutter="20">
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="物料简码" label-width="100px"   style="width: 100%">
                                <el-input
                                    placeholder="---请输入物料简码---"
                                    v-model="queryList.materialSimpCode"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="物料编码" label-width="100px"   style="width: 100%">
                                    <el-input
                                        placeholder="---请输入编码---"
                                        v-model="queryList.materialCode"
                                        style="width: 100%"
                                    />
                                </el-form-item>
                            </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="物料名称" label-width="100px"   style="width: 100%">
                                <el-input
                                    placeholder="---请输入名称---"
                                    v-model="queryList.materialName"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="物料规格" label-width="100px" style="width: 100%">
                                <el-input
                                    placeholder="---请输入名称---"
                                    v-model="queryList.materialSpecs"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="物料分类" label-width="100px" style="width: 100%">
                                <el-tree-select
                                    placeholder="---请选择物料分类---"
                                    collapse-tags
                                    collapse-tags-tooltip
                                    v-model="queryList.materialTypeIds"
                                    :props="{ label: 'label', value:'value',children: 'children' }"
                                    :data="materialTypeTree"
                                    multiple
                                    :render-after-expand="false"
                                    show-checkbox
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label-width="100px" label="品牌"   style="width: 100%">
                                <el-select
                                    placeholder="---请选择品牌---"
                                    v-model="queryList.brandCode"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in optionsBrand"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label-width="100px" label="库存单位"   style="width: 100%">
                                <el-select
                                    placeholder="---请选择单位---"
                                    v-model="queryList.unitCode"
                                    style="width: 100%"
                                >
                                    <el-option
                                        v-for="item in optionsUnit"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="更新时间" label-width="100px"   style="width: 100%">
                                <el-date-picker
                                    style="width: 100%"
                                    v-model="queryList.expectedDates"
                                    type="datetimerange"
                                    value-format="YYYY-MM-DD HH:mm:ss"
                                    format="YYYY-MM-DD HH:mm:ss"
                                    range-separator="-"
                                    unlink-panels="true"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    :default-time="defaultTime"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="状态" label-width="100px"   style="width: 100%">
                                <el-select
                                    placeholder="---请选择状态---"
                                    v-model="queryList.status"
                                    style="width: 100%"
                                >
                                    <el-option label="---请选择---" value />
                                    <el-option
                                        v-for="item in optionsState"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6" >
                            <el-form-item label="备注" label-width="100px"   style="width: 100%">
                                <el-input
                                    placeholder="---请输入备注---"
                                    v-model="queryList.remarks"
                                    style="width: 100%"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </vab-query-form-top-panel>
        </el-foot>

        <el-main class="nopadding">
            <scTable
                ref="mytable"
                :queryType="'material/pages'"
                :data="listData"
                :queryList="queryList"
                :column="columnList"
                :orderList="OrderList"
                :sort-orders="['ascending', 'descending']"
                @selection-change="selectionChange"
                row-key="materialId"
                key="materialId"
                stripe
                show-summary
                remoteSummary
            >
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column
                    label="物料简码"
                    fixed="left"
                    prop="materialSimpCode"
                    min-width="140"
                    sortable
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column label="物料编号" fixed="left" prop="materialCode" min-width="110" sortable></el-table-column>
                <el-table-column label="物料名称" fixed="left" prop="materialName" min-width="160" sortable show-overflow-tooltip>
                    <template #default="scope"> <span class="el-span-text" @click="opShow(scope.row, scope.$index)">{{scope.row.materialName}}</span></template>
                </el-table-column>
                <el-table-column label="计量单位" fixed="left" prop="unitName" min-width="105" sortable></el-table-column>
                <el-table-column label="规格" fixed="left" prop="materialSpecs" min-width="120" sortable show-overflow-tooltip></el-table-column>
                <el-table-column
                    label="分类"
                    fixed="left"
                    prop="materialTypeName"
                    min-width="120"
                    sortable
                    show-overflow-tooltip
                ></el-table-column>
                <el-table-column label="品牌" fixed="left" prop="brandName" min-width="95" sortable></el-table-column>
                <el-table-column label="最低库存预警" prop="minStock" min-width="135" sortable></el-table-column>
                <el-table-column label="最低配送数量" prop="minDeliveryQty" min-width="135" sortable></el-table-column>
                <el-table-column label="是否特殊物料" prop="isSpecialDesc" min-width="135" sortable></el-table-column>
                <el-table-column label="备注" prop="remarks" min-width="140" sortable></el-table-column>
                <el-table-column label="更新时间" prop="updateTime" min-width="110" sortable>
                    <template #default="scope">{{scope.row.updateTime?scope.row.updateTime?.slice(0,10):""}}</template>
                </el-table-column>
                <el-table-column label="状态" fixed="right" align="center" min-width="120" sortable>
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            :active-value="1"
                            :inactive-value="0"
                            @change="setStatus(scope.row)"
                        />
                    </template>
                </el-table-column>
                <el-table-column label="操作" fixed="right" align="center" min-width="180">
                    <template #default="scope">
                        <el-button-group>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                @click="opShow(scope.row, scope.$index)"
                            >查看</el-button>
                            <el-button
                                text
                                type="primary"
                                size="small"
                                :disabled="!editState"
                                v-if="(orgType==1)||(orgType==2&&scope.row.storeId==orgId)"
                                @click="opEdit(scope.row, scope.$index)"
                            >编辑</el-button>
                            <el-popconfirm
                                title="确定删除吗？"
                                v-if="(orgType==1)||(orgType==2&&scope.row.storeId==orgId)"
                                @confirm="opDelete(scope.row, scope.$index)"
                            >
                                <template #reference>
                                    <el-button
                                        text
                                        type="primary"
                                        size="small"
                                        v-show="isShow"
                                        :disabled="!deleteState"
                                    >删除</el-button>
                                </template>
                            </el-popconfirm>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>

    <save-dialog
        v-if="dialogSave"
        ref="saveDialog"
        @fatherMethod="opBindData"
        @success="handleSaveSuccess"
        @closed="dialogSave = false"
    ></save-dialog>
</template>

<script>
import saveDialog from "./save";
import publicjs from "@/api/model/publicjs";
import tool from "@/utils/tool";
import config from "@/config";
export default {
    name: "material",
    components: {
        saveDialog,
        publicjs,
    },
    data() {
        return {
            dialogSave: false,
            showCondition: false,
            selectionRows: [],
            pkList: ["materialId"],
            columnList: [],
            OrderList: { materialId: "Asc" },
            queryList: {
                materialTypeIds: [],
            },
            result: "", // 运行结果
            props1: {
                checkStrictly: true,
                emitPath: false,
            },
            addState: true, //可以增加
            editState: true, //可以修改
            editBatchState: true, //可以批量修改
            deleteState: true, //可以删除
            optionsState: [],
            materialTypeTree: [],
            optionsBrand: [],
            optionsUnit: [],
            isShow:false,//是否显示
            orgType:3,
            orgId:0,
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ]
        };
    },
    methods: {
        //添加
        opAdd() {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Add").setData({});
            });
        },
        //编辑
        opEdit(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Edit").setData(row);
            });
        },
        //查看
        opShow(row) {
            this.dialogSave = true;
            this.$nextTick(() => {
                this.$refs.saveDialog.open("Show").setData(row);
            });
        },
        //设置状态
        async setStatus(row) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    row.status == 0 ? "material/disabled" : "material/enable",
                    { materialIds: [row.materialId] }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //删除
        async opDelete(row) {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material/delete",
                    { materialIds: [row.materialId] }
                );
                if (returnValue.status == 200) {
                    this.$message.success("操作成功");
                    this.$refs.mytable.getData();
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        //批量删除
        async opBatchDelete() {
            // eslint-disable-next-line no-debugger
            //debugger;
            this.$confirm(
                `确定删除选中的 ${this.selectionRows.length} 项吗？`,
                "提示",
                {
                    type: "warning",
                }
            )
                .then(async () => {
                    const materialIds = this.selectionRows.map(
                        (p) => p.materialId
                    );
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "material/delete",
                                { materialIds: [...materialIds] }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$refs.mytable.getData();
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                        }
                    } catch (error) {
                        this.loading = false;
                        return false;
                    }
                })
                .catch(() => {});
        },
        //导出
        async exportExcel() {
            try {
                var response = await this.$API.auth.PostDownApi.post(
                    "material/export",
                    this.queryList
                );
                // 获取 Content-Disposition 头部信息
                debugger;
                const headers = new Headers(response.headers);
                console.log(headers);
                let fileName = headers.get("File-Name");
                console.log(fileName);
                fileName = decodeURIComponent(fileName);
                console.log(fileName);
                if (!fileName || fileName == "null") {
                    fileName = "物料信息.xlsx";
                }
                console.log(fileName);
                const blob = new Blob([response.data], {
                    type: "application/xlsx",
                });
                // 创建一个临时的 URL 对象，指向下载的 Blob 数据
                const url = window.URL.createObjectURL(blob);
                // 创建一个 <a> 元素，设置其 href 属性为 URL，并触发点击
                const a = document.createElement("a");
                a.href = url;
                a.download = fileName; // 下载时显示的文件名为从头信息中获取的文件名
                document.body.appendChild(a); // 将 <a> 元素添加到 DOM 中
                a.click(); // 模拟点击下载
                document.body.removeChild(a); // 下载完成后移除 <a> 元素
                window.URL.revokeObjectURL(url); // 释放 Blob 对象
            } catch (error) {
                this.loading = false;
                this.$alert(error.message, "提示", { type: "error" });
                return false;
            }
        },
        //表格选择后回调事件
        selectionChange(selection) {
            this.selectionRows = selection;
        },
        //本地更新数据
        handleSaveSuccess(data, mode) {
            if (mode == "Add") {
                this.$refs.mytable.refresh();
            } else if (mode == "Edit") {
                this.$refs.mytable.refresh();
            }
        },
        async opBindData() {
            this.$refs.mytable.clearSort();
            this.$refs.mytable.getData();
        },
        resetSearch() {
            this.queryList = {};
        },
        async initOptions() {
            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/options",
                    { Codes: ["Status"] }
                );
                if (returnValue.status == 200) {
                    this.optionsState = returnValue.response.find(
                        (p) => p.code == "Status"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "material-type/tree",
                    { status: 1 }
                );
                if (returnValue.status == 200) {
                    this.materialTypeTree = returnValue.response;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }

            try {
                var returnValue = await this.$API.auth.PostProcessApi.post(
                    "base-dictionary/dic-options",
                    { ParentBaseDictionaryCodes: ["001", "002"] }
                );
                if (returnValue.status == 200) {
                    this.optionsBrand = returnValue.response.find(
                        (p) => p.code == "001"
                    ).optionsDetails;
                    this.optionsUnit = returnValue.response.find(
                        (p) => p.code == "002"
                    ).optionsDetails;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
        this.orgId = tool.data.get("USER_INFO").OrgId;
        if(this.orgType==1) 
        {
            this.isShow=true;
        }
        console.log(this.orgType,this.isShow);
        await this.initOptions();
        await this.opBindData();
    },
};
</script>
